<template>
  <a-modal
    title="操作"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-steps :current="1">
      <a-step>
        <!-- <span slot="title">Finished</span> -->
        <template slot="title">Finished</template>
        <span slot="description">This is a description.</span>
      </a-step>
      <a-step title="In Progress" description="This is a description." />
      <a-step title="Waiting" description="This is a description." />
    </a-steps>
  </a-modal>
</template>

<script>
import { getPermissions } from '@/api/manage'
import { actionToObject } from '@/utils/permissions'
import pick from 'lodash.pick'

export default {
    name: 'RoleModal',
    data() {
        return {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 }
            },
            visible: false,
            confirmLoading: false,
            mdl: {},

            form: this.$form.createForm(this),
            permissions: []
        }
    },
    created() {
        this.loadPermissions()
    },
    methods: {
        add() {
            this.edit({ id: 0 })
        },
        edit(record) {
            this.mdl = Object.assign({}, record)
            this.visible = true

            // 有权限表，处理勾选
            if (this.mdl.permissions && this.permissions) {
                // 先处理要勾选的权限结构
                const permissionsAction = {}
                this.mdl.permissions.forEach(permission => {
                    permissionsAction[permission.permissionId] = permission.actionEntitySet.map(entity => entity.action)
                })
                // 把权限表遍历一遍，设定要勾选的权限 action
                this.permissions.forEach(permission => {
                    permission.selected = permissionsAction[permission.id] || []
                })
            }

            this.$nextTick(() => {
                this.form.setFieldsValue(pick(this.mdl, 'id', 'name', 'status', 'describe'))
            })
            console.log('this.mdl', this.mdl)
        },
        close() {
            this.$emit('close')
            this.visible = false
        },
        handleOk() {
            const _this = this
            // 触发表单验证
            this.form.validateFields((err, values) => {
                // 验证表单没错误
                if (!err) {
                    console.log('form values', values)

                    _this.confirmLoading = true
                    // 模拟后端请求 2000 毫秒延迟
                    new Promise(resolve => {
                        setTimeout(() => resolve(), 2000)
                    })
                        .then(() => {
                            // Do something
                            _this.$message.success('保存成功')
                            _this.$emit('ok')
                        })
                        .catch(() => {
                            // Do something
                        })
                        .finally(() => {
                            _this.confirmLoading = false
                            _this.close()
                        })
                }
            })
        },
        handleCancel() {
            this.close()
        },
        onChangeCheck(permission) {
            permission.indeterminate =
                !!permission.selected.length && permission.selected.length < permission.actionsOptions.length
            permission.checkedAll = permission.selected.length === permission.actionsOptions.length
        },
        onChangeCheckAll(e, permission) {
            Object.assign(permission, {
                selected: e.target.checked ? permission.actionsOptions.map(obj => obj.value) : [],
                indeterminate: false,
                checkedAll: e.target.checked
            })
        },
        loadPermissions() {
            const that = this
            getPermissions().then(res => {
                const result = res.result
                that.permissions = result.map(permission => {
                    const options = actionToObject(permission.actionData)
                    permission.checkedAll = false
                    permission.selected = []
                    permission.indeterminate = false
                    permission.actionsOptions = options.map(option => {
                        return {
                            label: option.describe,
                            value: option.action
                        }
                    })
                    return permission
                })
            })
        }
    }
}
</script>

<style scoped>
</style>
